<template>
	<view class="appointment_con">
		<view class="top"></view>
		<view class="section">
			<view class="content">
				
			
			<view class="list">
				<view class="info">
					<image :src="imgHttps + doctorDetail.doctorImg[0]"></image>
					<view class="info_box">
						<view class="up">
							<view class="name">{{doctorDetail.doctorName}}</view>
							<!-- <view class="star">{{doctorDetail.title}}</view> -->
						</view>
						<view class="down">
							<view class="hospital">挂号费：{{doctorDetail.consultFee}}元</view>
						</view>
					</view>
				</view>
				<view class="label">
					<view class="card">
						<image src="/static/images/lable1.png"></image>
						<text>服务</text>
						<span>{{doctorDetail.serviceCount}}</span>	
					</view>
					<view class="card">
						<image src="/static/images/lable2.png"></image>
						<text>评价</text>
						<span>{{doctorDetail.ratingCount}}</span>	
					</view>
					<view class="card">
						<image src="/static/images/lable3.png"></image>
						<text>锦旗</text>
						<span>{{doctorDetail.bannerCount}}</span>	
					</view>
				</view>
				<view class="descraption">
					<view class="title">医疗机构</view>
					<view class="text">{{doctorDetail.title}}   香薷中医诊所</view>
				</view>
				<view class="descraption">
					<view class="title">擅长</view>
					<view class="text">{{doctorDetail.expertise}}</view>
				</view>
				<view class="descraption">
					<view class="title">简介</view>
					<view class="text">{{doctorDetail.introduction}}</view>
				</view>
				<view class="descraption" v-if="selectedPatient">
					<view class="title">患者信息</view>
					<view class="text">{{selectedPatient.name}} {{selectedPatient.age}}岁 {{selectedPatient.gender==="M"?"男":"女"}} {{getRelationship(selectedPatient.relationship)}}</view>
				</view>
				<view class="addPatients" @click="addPatients">
					+选择患者信息
				</view>
			</view>
			
			<view class="app_date">
				<view class="title">日期</view>
				<view class="data_tabs">
					<view class="guid" v-for="(val,index) in doctorDetail.scheduleDates" :key="index" :class="{guidActive:current === index}" @click="tabDateClick(val,index)">
						<view class="guid_con">
							<view class="text" :class="{textDay:val.isAvailable == 1}">{{val.scheduleWeek}}</view>
							<view class="text" :class="{textDay:val.isAvailable == 1}">{{val.scheduleDate}}</view>
						</view>
						<view class="icon" v-if="val.isAvailable == 1">
							<image src="/static/images/activeIcon.png" style="width:100%;height:100%"></image>
							<span style="color:#fff">约</span>
						</view>
						<view class="icon" v-else>
							<image src="/static/images/disIcon.png" style="width:100%;height:100%"></image>
							<span>约</span>
						</view>
						
						<view class="icon" v-if="current === index">
							<image src="/static/images/dateIcon.png" style="width:100%;height:100%"></image>
							<span>约</span>
						</view>
					</view>
				</view>
			<!-- 	<view class="data_days">
					<view class="date_con" v-for="(items,index) in timeData" :key="index">
						<view class="diveder">
							<u-divider color="#000000" border-color="#FFDDDE">{{items.title}}</u-divider>
						</view>
						<view class="time_tabs">
							<view class="guid" v-for="(val,index) in items.children" :key="i" @click="tabTimeClick(val,i)">
								{{val.time}}
							</view>
						</view>
					</view>
					
				</view> -->
			</view>
			<!-- 
			<view class="evaluate_con">
				<view class="title">患者评价</view>
				<view  class="box">
					<view class="user">
						<view class="icon">
							<image src="/static/images/user.png" style="width:100%;height:100%"></image>
						</view>
						<view class="info">
							<view class="up">182****1245</view>
							<view class="down">2025-07-13 22:43:46</view>
						</view>
					</view>
					<view class="text">从抱着怀疑的态度第一次在互联网就诊到第一周服药身体各方面已出现明显好转的变化。感恩相遇雪梅老师是一个很值得信赖的好医生!</view>
					<view class="doctor">
						<view class="icon">
							<image src="/static/images/person.png" style="width:100%;height:100%"></image>
						</view>
						<view class="text_ys">医师评价</view>
						<u-rate :count="count" v-model="value" active-color="#FA3534" inactive-color="#b2b2b2"></u-rate>
					</view>
					<view class="down">
						<view class="left">看诊医师：王雪梅</view>
						<view class="right">
							<view class="set">
								<view class="icon">
									<image src="/static/images/dz.png" style="width:100%;height:100%"></image>
								</view>
								<view class="text_icon">点赞</view>
							</view>
							<view class="set">
								<view class="icon">
									<image src="/static/images/pl.png" style="width:100%;height:100%"></image>
								</view>
								<view class="text_icon">评论</view>
							</view>
							<view class="set">
								<view class="icon">
									<image src="/static/images/fx.png" style="width:100%;height:100%"></image>
								</view>
								<view class="text_icon">分享</view>
							</view>
						</view>
					</view>
				</view>
			</view> -->
			</view>
		</view>
		<view class="bottom">
			<view class="btn" @click="submit">挂号看诊</view>
		</view>
	</view>
</template>

<script>
	import { getDoctorDetail } from "@/api/consultation";
	import { relationshipDict } from "@/pages/tabbar/home/patients/personDict";
	export default{
		data(){
			return {
				imgHttps:'https://shop-img.xiangruzy.cn',
				current:3,
				count: 5,
				value: 2,
				selectedPatient: null,
				queryFetch:{
					shopCode:'',//门店编号
					departmentCode:'',//科室编号
					doctorCode:'',
				},
				doctorDetail:{},
				dateList:[
					{day:'周四',date:'08-07'},{day:'周五',date:'08-08'},{day:'周六',date:'08-09'},{day:'周日',date:'08-10'},
					{day:'周一',date:'08-11'},{day:'周二',date:'08-12'},{day:'周三',date:'08-13'},{day:'周四',date:'08-14'},
				],
				timeData:[
					{title:'08月10日 周日 上午',children:[{time:'08:00-09:00'},{time:'09:00-10:00'},{time:'10:00-11:00'},{time:'11:00-12:00'}]},
					{title:'08月10日 周日 下午',children:[{time:'14:00-15:00'},{time:'15:00-16:00'},{time:'16:00-17:00'},{time:'17:00-18:00'}]},
				]
			}
		},
		onLoad(opts) {
			console.log(opts)
			this.queryFetch.departmentCode = opts.departmentCode
			this.queryFetch.shopCode = opts.shopCode
			this.queryFetch.doctorCode = opts.doctorCode
			this.getDoctorDetailFun()
		},
		onShow(){
			// 从患者列表页面返回时，获取选中的患者
			let selectedPatient = uni.getStorageSync('selectedPatient');
			if (selectedPatient) {
				this.selectedPatient = selectedPatient;
			}
		},
		methods:{
			// 获取医师详情
			async getDoctorDetailFun(){
				let that = this
				let res = await getDoctorDetail(this.queryFetch)
				console.log(res)
				if(res.code == 200){
					that.doctorDetail = res.rows[0] || {}
				}
			},
			getRelationship(relationship){
				if (relationship) {
					return relationshipDict[relationship].value || relationship;
				}
				return '';
			},
			tabDateClick(val,i){
				this.current = i
				console.log(val)
			},
			addPatients(){
				uni.navigateTo({
					url:"/pages/tabbar/home/patients/index"
				})
			},
			submit(){
				uni.navigateTo({
					url:"/pages/tabbar/home/appointInfo"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.appointment_con{
		width:100%;
		height:100%;
		background: #F8F8F8;
		position: absolute;
		.top{
			width:100%;
			height:425rpx;
			background: #7D2527;
		}
		.section{
			position: absolute;
			// background: #F8F8F8;
			top:50rpx;
			left:0;
			width:100%;
			padding: 30rpx 30rpx 260rpx 30rpx;
			.content{
				background: #F8F8F8;
				border-radius: 18rpx 18rpx 0 0;
			}
			.list{
				background: #FFFFFF;
				border-radius: 18rpx;
				margin-bottom: 20rpx;
				padding: 30rpx;
				.info{
					display: flex;
					align-items: center;
					margin-bottom: 24rpx;
					image{
						width:110rpx;
						height:110rpx;
						border-radius: 50%;
					}
					.info_box{
						padding-left: 24rpx;
						.up{
							display: flex;
							align-items: center;
							margin-bottom: 10rpx;
							.name{
								font-weight: 600;
								font-size: 34rpx;
								color: #000000;
								margin-right: 20rpx;
							}
							.star{
								font-weight: 400;
								font-size: 26rpx;
								color: #43578E;
							}
						}
						.down{
							display: flex;
							align-items: center;
							.hospital{
								font-weight: 400;
								font-size: 26rpx;
								color: #000000;
								margin-right: 20rpx;
							}
							
						}
					}
				}
				.label{
					display: flex;
					padding: 15rpx 31rpx;
					background: #F5F4EC;
					border-radius: 5rpx 5rpx 5rpx 5rpx;
					margin-bottom: 18rpx;
					.card{
						flex: 1;
						display: flex;
						align-items: center;
						font-weight: 400;
						font-size: 26rpx;
						text{
							color: #333333;
							margin-right: 15rpx;
						}
						span{
							color:#7D2527;
						}
						image{
							width:26rpx;
							height:27rpx;
							margin-right: 10rpx;
						}
					}
				}
				.descraption{
					margin-bottom: 22rpx;
					.title{
						font-weight: 500;
						font-size: 30rpx;
						color: #7D2527;
						margin-bottom: 10rpx;
					}
					.text{
						font-weight: 400;
						font-size: 26rpx;
						color: #000000;
					}
				}
				.addPatients{
					padding-top: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color:#7D2527;
					font-size: 30rpx;
				}
			}
			.app_date{
				background: #FFFFFF;
				border-radius: 18rpx;
				margin-bottom: 20rpx;
				padding: 30rpx;
				.title{
					font-weight: 500;
					font-size: 30rpx;
					color: #000000;
					padding-bottom: 17rpx;
					margin-bottom: 20rpx;
					border-bottom: 1rpx solid #E4E4E4;
				}
				.data_tabs{
					margin-bottom: 37rpx;
					width:100%;
					display: flex;
					gap: 13rpx;
					flex-wrap: wrap;
					justify-content: space-between;
					.guid{
						padding: 21rpx 29rpx;
						border:1rpx solid #eee;
						margin-bottom: 13rpx;
						display: flex;
						justify-content: center;
						position: relative;
						.icon{
							position: absolute;
							right:0;
							top:0;
							width:61rpx;
							height:53rpx;
							
							span{
								position: absolute;
								right:10rpx;
								top:1rpx;
								font-weight: 400;
								font-size: 24rpx;
								color:#000;
							}
						}
						.guid_con{
							font-weight: 400;
							font-size: 30rpx;
							text-align: center;
							.text{
								color: #999999;
							}
							.textDay{
								color: #000000;
							}
							.textActive{
								color:#fff;
							}
						}
					}
					.guidActive{
						background: #7D2527;
						.guid_con{
							.text{
								color:#fff;
							}
						}
						.icon{
							span{
								color:#7D2527;
							}
						}
					}
				}
				.data_days{
					.date_con{
						margin-bottom: 24rpx;
						.diveder{
							margin-bottom: 24rpx;
						}
						.time_tabs{
							display: flex;
							gap: 24rpx;
							flex-wrap: wrap;
							justify-content: space-between;
							.guid{
								padding: 21rpx 29rpx;
								border:1rpx solid #eee;
								margin-bottom: 13rpx;
								display: flex;
								justify-content: center;
								width:44%;
							}
						}
					}
					
				}
			}
			.evaluate_con{
				background: #FFFFFF;
				border-radius: 18rpx;
				margin-bottom: 20rpx;
				padding: 30rpx;
				.title{
					font-weight: 500;
					font-size: 34rpx;
					color: #000000;
					padding-bottom: 20rpx;
				}
				.box{
					padding-top: 30rpx;
					.user{
						display: flex;
						margin-bottom: 17rpx;
						.icon{
							width:80rpx;
							height:80rpx;
							border-radius: 80rpx;
							margin-right: 17rpx;
						}
						.info{
							.up{
								font-weight: 600;
								font-size: 30rpx;
								color: #000000;
							}
							.down{
								font-weight: 400;
								font-size: 26rpx;
								color: #999999;
							}
						}
					}
					.text{
						font-weight: 400;
						font-size: 26rpx;
						color: #000000;
						margin-bottom: 22rpx;
					}
					.doctor{
						display: flex;
						align-items: center;
						margin-bottom: 30rpx;
						.icon{
							width:26rpx;
							height:26rpx;
							margin-right: 9rpx;
						}
						.text_ys{
							font-weight: 400;
							font-size: 26rpx;
							color: #000000;
							margin-right: 9rpx;
						}
					}
					.down{
						display: flex;
						justify-content: space-between;
						.left{
							padding: 7rpx 14rpx;
							font-weight: 400;
							font-size: 26rpx;
							color: #BD444C;
							background: #FBF3E0;
							border-radius: 5rpx;
							border: 1px solid #EFDBAA;
						}
						.right{
							display: flex;
							align-items: center;
							.set{
								display: flex;
								align-items: center;
								margin-right: 18rpx;
								.icon{
									width:39rpx;
									height:37rpx;
									margin-right: 4rpx;
								}
								.text_icon{
									font-weight: 400;
									font-size: 26rpx;
									color: #000000;
								}
							}
						}
					}
				}
			}
		}
		.bottom{
			width:100%;
			position: fixed;
			bottom: 0;
			padding: 30rpx 30rpx 80rpx 30rpx;
			background: #fff;
			.btn{
				width:100%;
				background: #7D2527;
				border-radius: 50rpx;
				height:80rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 32rpx;
				color:#fff;
			}
		}
	}
</style>